import React from "react";

class App extends React.Component {
  state = {
    list: ["Apple", "Banana"],
  };

  render(): React.ReactNode {
    // 1. 基于 state.list 算出一份 jsx 的 list
    const jsxList = this.state.list.map((item, index) => (
      <li key={index}>{item}</li>
    ));

    console.log("jsxList", jsxList);

    return (
      <div>
        <h1>App</h1>
        <button
          onClick={() => {
            this.setState((state) => ({ list: [...state.list, "Orange"] }));
          }}
        >
          新增一个橘子
        </button>
        <ul>
          {this.state.list.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;
